<template>
	<div class="pyxcy words-item-list yuwenPinyiWriteWords">
		<div class="words-item" v-for="(item, index) in props.data" :key="index">
			<template v-for="(w, i) in item" :key="i">
				<Words :text="answetResult(index, item, i)" :size="10" :ping-yi="[item[i]]"  blank :line-grid="false"/>
			</template>
		</div>
	</div> 
</template>

<script setup>
import { ref } from "vue"
import Words from "@/components/words/index.vue"
import Props from "../props.js"
const props = defineProps(Props)
const emit = defineEmits(['answer'])
const isDraw = ref(false)
const toogleDraw = () => isDraw.value = !isDraw.value
const answetResult = (index, item, i) => props.result?.[index]?.[i] || ['']
</script>

<style lang="scss" scoped>
.yuwenPinyiWriteWords {
	display: flex;
	flex-wrap: wrap;
	.words-item {
		margin-bottom: 1.6rem;
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.course-words-list .course-words-box image {
		opacity: 0;
	}
}
</style>
<style lang="scss">
.pyxcy {
	.course-words-pinyi {
		position: relative;
		top: -0.8rem;
	}
}
</style>